<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('党员信息')" />
    <style>
      body {
        background: linear-gradient(135deg, #4b0000, #2b0000);
        color: #fff;
        font-family: "Microsoft YaHei", sans-serif;
        margin: 0;
        padding: 0;
        overflow: auto;
      }

      .dashboard-container {
        width: 100vw;
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
      }

      .dashboard-header {
        text-align: center;
        margin-bottom: 20px;
      }

      .dashboard-title {
        font-size: 2.5em;
        margin: 0;
        background: linear-gradient(to right, #ffd700, #ffa500);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
      }

      .dashboard-subtitle {
        font-size: 1.2em;
        color: #ffa5a5;
        margin-top: 10px;
      }

      .dashboard-content {
        display: flex;
        gap: 20px;
        min-height: calc(100vh - 120px);
      }

      .filters-panel {
        flex: 1;
        background: rgba(100, 0, 0, 0.7);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(200, 50, 50, 0.8);
        display: flex;
        flex-direction: column;
      }

      .filters-panel h2 {
        margin-top: 0;
        color: #ffcc00;
        border-bottom: 2px solid rgba(200, 50, 50, 0.8);
        padding-bottom: 10px;
      }

      .filter-group {
        margin-bottom: 20px;
      }

      .filter-group label {
        display: block;
        margin-bottom: 8px;
        color: #ffcc00;
      }

      .filter-group select,
      .filter-group input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ffcc00;
        border-radius: 8px;
        background: rgba(50, 0, 0, 0.7);
        color: white;
        font-size: 1em;
        box-sizing: border-box;
      }

      .search-box {
        display: flex;
        margin-bottom: 20px;
      }

      .search-input {
        flex: 1;
        padding: 12px;
        border: 1px solid #ffcc00;
        border-radius: 8px 0 0 8px;
        background: rgba(50, 0, 0, 0.7);
        color: white;
        font-size: 1em;
      }

      .search-btn {
        padding: 12px 20px;
        background: linear-gradient(135deg, #ff3333, #cc0000);
        color: white;
        border: none;
        border-radius: 0 8px 8px 0;
        cursor: pointer;
        font-weight: bold;
      }

      .stats-panel {
        flex: 2;
        background: rgba(100, 0, 0, 0.7);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(200, 50, 50, 0.8);
        display: flex;
        flex-direction: column;
      }

      .stats-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .stats-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 20px;
      }

      .stat-card {
        background: rgba(80, 0, 0, 0.6);
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        border: 1px solid rgba(200, 50, 50, 0.8);
      }

      .stat-title {
        font-size: 0.9em;
        color: #ff9999;
        margin-bottom: 10px;
      }

      .stat-value {
        font-size: 2em;
        font-weight: bold;
        background: linear-gradient(to right, #ffcc00, #ff9900);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .members-panel {
        flex: 2;
        background: rgba(100, 0, 0, 0.7);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(200, 50, 50, 0.8);
        margin-top: 20px;
      }

      .members-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .members-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
      }

      .member-card {
        background: rgba(80, 0, 0, 0.6);
        border-radius: 10px;
        padding: 15px;
        border: 1px solid rgba(200, 50, 50, 0.8);
        transition: all 0.3s ease;
      }

      .member-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(255, 204, 0, 0.5);
        border: 1px solid #ffcc00;
      }

      .member-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }

      .member-name {
        font-size: 1.2em;
        font-weight: bold;
        color: #ffcc00;
      }

      .member-branch {
        font-size: 0.9em;
        color: #ff9999;
      }

      .member-detail {
        margin: 10px 0;
        display: flex;
      }

      .detail-label {
        font-weight: 500;
        width: 80px;
        color: #ff9999;
      }

      .detail-value {
        flex: 1;
        color: #ffcccc;
      }

      .view-application {
        display: block;
        width: 100%;
        padding: 8px;
        background: linear-gradient(135deg, #ff3333, #cc0000);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        margin-top: 10px;
        transition: all 0.3s ease;
      }

      .view-application:hover {
        background: linear-gradient(135deg, #ff6666, #ff0000);
        transform: translateY(-2px);
      }

      /* 滚动条样式 */
      ::-webkit-scrollbar {
        width: 12px;
      }

      ::-webkit-scrollbar-track {
        background: rgba(30, 0, 0, 0.5);
      }

      ::-webkit-scrollbar-thumb {
        background: #cc0000;
        border-radius: 6px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: #ff3333;
      }

      /* 响应式设计 */
      @media (max-width: 1200px) {
        .dashboard-content {
          flex-direction: column;
        }

        .filters-panel,
        .stats-panel {
          flex: none;
        }

        .members-panel {
          margin-top: 20px;
        }
      }
    </style>
  </head>
  <body>
    <div class="dashboard-container">
      <div class="dashboard-header">
        <h1 class="dashboard-title">党员信息展示面板</h1>
        <p class="dashboard-subtitle">全面展示学院党员信息</p>
      </div>

      <div class="dashboard-content">
        <div class="filters-panel">
          <h2>筛选条件</h2>
          <div class="filter-group">
            <label for="branchFilter">所属支部</label>
            <select
              id="branchFilter"
              th:with="branches=${@dict.getType('party_branch')}"
            >
              <option value="">全部支部</option>
              <option
                th:each="branch : ${branches}"
                th:value="${branch.dictValue}"
                th:text="${branch.dictLabel}"
              ></option>
            </select>
          </div>

          <div class="filter-group">
            <label for="timeFilter">入党时间</label>
            <select id="timeFilter">
              <option value="">全部时间</option>
              <option value="1">近1年</option>
              <option value="2">近3年</option>
              <option value="3">近5年</option>
              <option value="4">5年以上</option>
            </select>
          </div>

          <div class="filter-group">
            <label for="positionFilter">党内职务</label>
            <select id="positionFilter">
              <option value="">全部职务</option>
              <option value="1">党委书记</option>
              <option value="2">党委副书记</option>
              <option value="3">组织委员</option>
              <option value="4">宣传委员</option>
              <option value="5">普通党员</option>
            </select>
          </div>

          <div class="search-box">
            <input
              type="text"
              class="search-input"
              placeholder="搜索党员姓名、支部名称..."
              id="searchInput"
            />
            <button class="search-btn" onclick="searchMembers()">
              <i class="fa fa-search"></i>
            </button>
          </div>
        </div>

        <div class="stats-panel">
          <div class="stats-header">
            <h2>统计信息</h2>
          </div>
          <div class="stats-summary">
            <div class="stat-card">
              <div class="stat-title">党员总数</div>
              <div class="stat-value" id="totalMembers">0</div>
              <div>人</div>
            </div>
            <div class="stat-card">
              <div class="stat-title">党支部数</div>
              <div class="stat-value" id="totalBranches">0</div>
              <div>个</div>
            </div>
            <div class="stat-card">
              <div class="stat-title">本年度新发展</div>
              <div class="stat-value" id="newMembersThisYear">0</div>
              <div>人</div>
            </div>
          </div>

          <div class="members-panel">
            <div class="members-header">
              <h2>党员列表</h2>
            </div>
            <div class="members-container" id="membersContainer">
              <!-- 党员卡片将通过JavaScript动态加载 -->
              <div
                class="loading-message"
                style="text-align: center; padding: 50px; color: #ffcc00"
              >
                <i class="fa fa-spinner fa-spin"></i> 正在加载党员信息...
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />

    <script type="text/javascript">
      // 全局变量
      let currentPage = 1;
      let currentFilters = {};

      // 查看入党志愿书
      function viewApplication(memberName) {
        // 使用layer弹窗显示入党志愿书详情
        layer.open({
          type: 2,
          title: memberName + " 的入党志愿书",
          shadeClose: true,
          shade: 0.8,
          area: ["80%", "90%"],
          content:
            ctx +
            "system/movement/application/view?memberName=" +
            encodeURIComponent(memberName),
          btn: ["关闭"],
          yes: function (index, layero) {
            layer.close(index);
          },
        });
      }

      // 加载统计信息
      function loadStats() {
        $.ajax({
          url: ctx + "system/movement/getPartyMemberStats",
          type: "POST",
          dataType: "json",
          success: function (result) {
            if (result.code == 0 && result.data) {
              $("#totalMembers").text(result.data.totalMembers || 0);
              $("#totalBranches").text(result.data.totalBranches || 0);
              $("#newMembersThisYear").text(
                result.data.newMembersThisYear || 0
              );
            }
          },
          error: function () {
            console.log("加载统计信息失败");
          },
        });
      }

      // 加载党员列表
      function loadMemberList(filters = {}) {
        const container = $("#membersContainer");

        // 显示加载状态
        container.html(
          '<div class="loading-message" style="text-align: center; padding: 50px; color: #ffcc00;"><i class="fa fa-spinner fa-spin"></i> 正在加载党员信息...</div>'
        );

        $.ajax({
          url: ctx + "system/movement/getPartyMemberList",
          type: "POST",
          data: {
            pageNum: currentPage,
            pageSize: 20,
            search: filters.search || "",
            branchFilter: filters.branchFilter || "",
            timeFilter: filters.timeFilter || "",
            positionFilter: filters.positionFilter || "",
          },
          dataType: "json",
          success: function (result) {
            if (result.code == 0 && result.rows) {
              renderMemberList(result.rows);
            } else {
              container.html(
                '<div style="text-align: center; padding: 50px; color: #ff9999;">暂无党员信息</div>'
              );
            }
          },
          error: function () {
            container.html(
              '<div style="text-align: center; padding: 50px; color: #ff9999;">加载失败，请刷新重试</div>'
            );
          },
        });
      }

      // 渲染党员列表
      function renderMemberList(members) {
        const container = $("#membersContainer");
        let html = "";

        if (members && members.length > 0) {
          members.forEach(function (member) {
            // 格式化日期
            const joinDate = member.joinPartyDate
              ? new Date(member.joinPartyDate).toLocaleDateString("zh-CN")
              : "未知";

            // 获取部门名称（支部名称）
            const branchName = member.deptName || "未知支部";

            // 获取党内职务
            const partyPost = member.partyPost || "普通党员";

            html += `
                        <div class="member-card">
                            <div class="member-header">
                                <div class="member-name">${
                                  member.name || "未知"
                                }</div>
                                <div class="member-branch">${branchName}</div>
                            </div>
                            <div class="member-detail">
                                <span class="detail-label">职务:</span>
                                <span class="detail-value">${partyPost}</span>
                            </div>
                            <div class="member-detail">
                                <span class="detail-label">入党时间:</span>
                                <span class="detail-value">${joinDate}</span>
                            </div>
                            <button class="view-application" onclick="viewApplication('${
                              member.name || ""
                            }')">查看入党志愿书</button>
                        </div>
                    `;
          });
        } else {
          html =
            '<div style="text-align: center; padding: 50px; color: #ff9999;">暂无党员信息</div>';
        }

        container.html(html);
      }

      // 搜索党员
      function searchMembers() {
        const keyword = document.getElementById("searchInput").value.trim();
        currentFilters.search = keyword;
        currentPage = 1;
        loadMemberList(currentFilters);
      }

      // 筛选变化处理
      function onFilterChange() {
        currentFilters = {
          search: $("#searchInput").val().trim(),
          branchFilter: $("#branchFilter").val(),
          timeFilter: $("#timeFilter").val(),
          positionFilter: $("#positionFilter").val(),
        };
        currentPage = 1;
        loadMemberList(currentFilters);
      }

      // 回车搜索
      function setupEnterSearch() {
        $("#searchInput").on("keypress", function (e) {
          if (e.which == 13) {
            searchMembers();
          }
        });
      }

      // 页面加载完成后初始化
      $(function () {
        // 加载统计信息
        loadStats();

        // 加载党员列表
        loadMemberList();

        // 设置筛选器变化监听
        $("#branchFilter, #timeFilter, #positionFilter").on(
          "change",
          onFilterChange
        );

        // 设置回车搜索
        setupEnterSearch();
      });
    </script>
  </body>
</html>
